import React, { Component } from 'react'
//import axios from 'axios'
//import PropTypes from 'prop-types'
import PubSub from 'pubsub-js'


export default class Search extends Component {
    state = {
        keywords:''
    }
    /*static propTypes = {
        updateAppState:PropTypes.func.isRequired
    }*/
    search = async ()=>{
        /*
        this.props.updateAppState({isFirst:false,isLoading:true,list:[]})
        */
        PubSub.publish('getuserlist',{isFirst:false,isLoading:true,list:[]})
        /*const {keywords} = this.state
        console.log('search==>',keywords)*/
        const {keywordsElement:{value}} = this
        console.log('searc fun2=>',value)
        /*axios.get('https://api.github.com/search/users?q='+value).then((res)=>{
            PubSub.publish('getuserlist',{isFirst:false,isLoading:false,list:res.data.items})
            console.log(res.data.items)
            
            //this.props.updateAppState(res.data.items)
        }).catch((res)=>{
            
            PubSub.publish('getuserlist',{isFirst:false,isLoading:false,err:res.message})
        })*/
        /*
        fetch('https://api.github.com/search/users?q='+value).then(
            response =>{ 
                console.log('fetch success==>',response)
                return response.json()
            }
        ).then(
            response =>{
                console.log(response.items)
                PubSub.publish('getuserlist',{isFirst:false,isLoading:false,list:response.items})
            }
        ).catch(
            (error)=>{console.log('error==>',error)}
        )
        */
       try {
        const response =  await fetch('https://api.github.com/search/users?q='+value)
        const data = await response.json()
        console.log(data.items)
        PubSub.publish('getuserlist',{isFirst:false,isLoading:false,list:data.items})
       } catch (error) {
        console.log('error==>',error)
       }
       

    }
    //非受控组件
    getData = (inputName)=>{
        return (event)=>{
            console.log(event.target.value)
            this.setState({[inputName]:event.target.value})
        }
    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                {/*<input onChange={this.getData('keywords')} type="text" placeholder="enter the name you search"/>&nbsp*/}
                <input ref={c => this.keywordsElement = c} type="text" placeholder="enter the name you search"/>&nbsp;

                <button onClick={this.search}>Search</button>
                </div>
            </section>
        )
    }
}
